<!-- 静态授权（D音/K手） 二维码 (原始的）-->
<template>
<!--  :width="type==4?'380px':'800px'"-->
  <ele-modal
    v-if=visible
    class="el-model-class"
    width="380px"
    :show-close="false"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    @close="updateVisible(false)"
  >
    <div v-if="type==4" class="qr-code">
      <p class="qr-title">K手登录</p>
      <div class="qr-code-main" style="height: 280px; width: 280px;">
        <img :src="code.data" alt="二维码图片" width="280px">
      </div>
      <div class="qr-refresh-text"> 请用K手扫描二维码登录 </div>
      <!--<div class="qr-refresh-text"> 请用K手扫描二维码登录 “weijuyunke” </div>-->
    </div>
    <div class="content-container" v-else>
      <div class="auth-container">
        <div class="hint-title">快捷安全登录</div>
        <div>使用 D音APP，打开「首页 - 扫一扫」</div>
        <div class="qr-container">
          <img class="qr" :src="code.data" alt="二维码图片">
        </div>
      </div>
      <!--<div class="scope-container">
        <div class="client-info flex-align-center">
          <div class="client-name">优选科技</div>
          <div class="client-text">将获得以下权限</div>
        </div>
        <div class="scope-list-wrap">
          <div class="client-scope" v-for="(i,j) in list">
            <div class="scope-item flex-align-center"><div class="icon-scope icon-gray"></div>{{i.name}}</div>
          </div>
        </div>
      </div>-->
    </div>
  </ele-modal>
</template>

<script>
  import {accountCode, kuaishouCode, ksGroupCode} from "@/api/matrixManage/accountList";
  export default {
    data(){
      return {
        // D音二维码
        code:'',
        // 弹窗是否打开
        visible:false,
        list:[
          {
            name:'获取公开视频列表能力'
          },
          {
            name:'往你的D音账号内发布公开作品（授权后无需你操作发布）'
          },
          {
            name:'查询指定视频能力'
          },
          {
            name:'获取你的D音头像、昵称'
          },
          {
            name:'获取并管理你的视频评论'
          }
        ],
      }
    },
    name: "static-code",
    props: {
      //1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手
      type:Number
    },
    created(){

    },
    methods:{
      async show(form){
        console.log("form=====",form)
        this.visible=true
        console.log("this.type",this.type)
        if(this.type==4){
          if(form){
            // 获取K手静态二维码(带分组groupId）
            this.code =await ksGroupCode(this.$store.state.user.info.username,form.id,this.$store.state.user.info.merchantId)
          }
          else{
            // 获取K手静态二维码
            this.code =await kuaishouCode(this.$store.state.user.info.username,this.$store.state.user.info.merchantId)
          }
        }
        // 0-2 都是不同的抖音扫描
        else{
          // type=20,传入的form，则为二维码链接
          // 数字人管理——任务列表——发布作品
          if(form){
              this.code=form
          }
          else {
            // 获取D音静态二维码
            this.code =await accountCode(this.$store.state.user.info.username,this.$store.state.user.info.merchantId)
          }
        }
        console.log("code===============",this.code,'this.type',this.type)
      },
      /* 更新 visible */
      updateVisible(value) {
        this.visible=value
      },
    }
  }
</script>

<style scoped lang="less">
  /*D音二维码--*/
  .content-container{
    max-width: 800px;
    height: 400px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    /*margin: 96px auto;*/
    border: 1px solid rgba(22,24,35,.12);
    box-sizing: border-box;
    border-radius: 12px;
    background: radial-gradient(16.94% 22.31% at 92.06% 92.63%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(63% 56.89% at 78.19% -21.62%, rgba(255, 255, 255, 0.8) 0%, rgba(247, 252, 252, 0.8) 34.14%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(38.69% 102.05% at 36.88% 102.05%, #f6fdfa 0%, #fff 29.12%, rgba(255, 255, 255, 0) 100%),
    url(https://lf-cdn-tos.bytescm.com/obj/static/ies/tiktok_open_h5/connect/image/auth_bg.f185ff8f.png),-webkit-gradient(linear, left top, left bottom, from(rgba(253, 219, 234, 0.2)), to(rgba(190, 253, 254, 0.2)));
    .auth-container{
      width: 400px;
      height: 390px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /*padding-top: 64px;*/
      .hint-title{
        font-size: 18px;
        text-align: center;
        color: #2f3035;
        font-weight: 500;
        line-height: 26px;
        margin: 0 0 8px;
      }
      .qr-container{
        position: relative;
        width: 160px;
        height: 160px;
        background: #fff;
        border: 1px solid rgba(22,24,35,.12);
        box-sizing: border-box;
        border-radius: 8px;
        margin-top: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        .qr{
          width: 155px;
          height: 155px;
        }
      }
    }
    .scope-container{
      flex: 1 1;
      height: 358px;
      display: flex;
      flex-direction: column;
      border-left: 1px solid rgba(47,48,53,.06);
      margin-top: 32px;
      padding-top: 32px;
      padding-left: 30px;
      padding-right: 50px;
      font-size: 14px;
      text-align: left;
      .client-info{
        margin-bottom: 16px;
        .client-name{
          font-weight: 500;
          color: #2f3035;
        }
        .client-text{
          color: rgba(47,48,53,.4);
          margin-left: 5px;
        }
      }
      .scope-list-wrap{
        height: 100%;
        overflow: hidden;
        .client-scope{
          overflow-y: scroll;
          width: calc(100% + 17px);
          .scope-item{
            display: flex;
            margin-bottom: 16px;
            color: #2f3035;
            width: calc(100% - 17px);
            .icon-gray{
              background-image: url();
              background-position: 0 -2px;
            }
            .icon-scope{
              margin-right: 8px;
              width: 16px;
              height: 16px;
              flex-shrink: 0;
              background-size: 100% auto;
            }
          }
        }
      }
    }
  }
  /*  K手二维码*/
  .qr-code {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 380px;
    height: 536px;
    background: #fff;
    .qr-title {
      height: 45px;
      font-size: 32px;
      font-weight: 400;
      color: #222;
      line-height: 45px;
      margin: 52px auto 27px;
    }
    .qr-code-main {
      position: relative;
    }
    .qr-refresh-text {
      margin-top: 10px;
      width: 242px;
      font-size: 22px;
      font-weight: 400;
      color: #222;
      line-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>


